<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" class="demo-form-inline" style="display: flex; align-items: center">
                <el-form-item label="书名">
                    <el-input v-model="bookname" placeholder="书名"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="bookauthor" placeholder="作者"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.prevent="query(1)">查询</el-button>
                    <el-button type="primary" @click.prevent="create()">添加</el-button>
                </el-form-item>
            </el-form>

        </el-header>
        <el-main>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column prop="bookname" label="书名"></el-table-column>
                <el-table-column prop="bookpress" label="出版社"></el-table-column>
                <el-table-column prop="pressdate" label="出版日期">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">
                            <!--六月 22, 2016-->
                            {{ scope.row.pressdate.replace(/(\S+)\s+(\d+)[,\s]+(\d+)/
                                    ,"$3年$1$2号") }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="分类"></el-table-column>
                <el-table-column prop="bookauthor" label="作者"></el-table-column>
                <el-table-column prop="bookimage" label="图片">
                    <template slot-scope="scope">
<!--                        :src="scope.row.bookimage"-->
                        <el-image
                            style="width: 80px; height: 100px"
                            :src="'../'+scope.row.bookimage"
                            fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="modify(scope.row)" type="text" size="small">编辑</el-button>
                        <el-popconfirm title="请问是否经逻辑删除, 否则使用物理删除？"
                                       confirm-button-text="逻辑删除"
                                       cancel-button-text="物理删除"
                                       @confirm="remove(scope.row,'逻辑删除')"
                                       @cancel="remove(scope.row,'物理删除')" >
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: right">
            <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                    background :page-sizes="[2,3,4,5]"
                    layout="sizes, prev, pager, next"
                    :total="tableData.total"
                    :current-page.sync="tableData.page" >
            </el-pagination>
        </el-footer>
    </el-container>

    <el-dialog title="图书编辑" :visible.sync="dialogFormVisible">
        <div style="display: flex; justify-content: space-around;">
            <el-form>
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="editBook.bookname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="editBook.bookauthor" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-input v-model="editBook.bookpress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-date-picker v-model="editBook.pressdate" type="date" autocomplete="off"></el-date-picker>
                </el-form-item>
            </el-form>

            <el-upload name="image"
                    class="avatar-uploader"
                    action="../UploadImageServlet.s"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="editBook.bookimage" :src="'../'+editBook.bookimage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBook">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            tableData: {page:1},
            pageSize: 2,
            bookname:"",
            bookauthor:"",
            editBook : {bookname:"",bookauthor:"",bookpress:"",pressdate:new Date(),bookimage:''},
            dialogFormVisible : false,
            formLabelWidth : "100px",
        },
        created(){
            this.query(1);
        },
        methods:{
            sizeChange(size){
              this.pageSize = size;
              this.query(1);
            },
            query(page){
                //this.page = page;
                axios.get("../QueryBookServlet.s",{
                    params : {
                        bookname: this.bookname,
                        bookauthor: this.bookauthor,
                        currentPage: page,
                        pageSize: this.pageSize
                    }
                }).then(res=>{
                    this.tableData = res.data;
                    this.tableData.page = page;
                })
            },
            saveBook(){
                // 构建post参数
                var params = new URLSearchParams();
                if(this.editBook.pressdate instanceof Date){
                    this.editBook.pressdate = this.editBook.pressdate.toLocaleDateString();
                    this.editBook.pressdate = this.editBook.pressdate.replace(/\//g, "-")
                }

                for (let name in this.editBook) {
                    params.append(name, this.editBook[name]);
                }

                // 发送 ajax post 请求
                axios.post("../SaveBookServlet.s", params).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                        this.query(1); // 刷新表格
                        this.dialogFormVisible = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                // res 是后台返回的结果 , 但是 此 res != axios.res
                // res ==> axio.res.data
                // res.data ==> webpath
                this.editBook.bookimage = res.data;
                this.$forceUpdate();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                //  返回 false 终止上传
                return isJPG && isLt2M;
            },
            create(){
                this.editBook = {bookname:"",bookauthor:"",bookpress:"",pressdate:new Date(),bookimage:''};
                this.dialogFormVisible = true;
            },
            modify(book){
                // 复制 book 的属性 => editBook
                for (let name in book) {
                    this.editBook[name] = book[name];
                }
                let months = ['一','二','三','四','五','六','七','八','九','十','十一','十二']

                let m = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/
                    ,"$1")
                // 获取月份 数字
                let i = months.findIndex(month=>{
                    return month == m;
                })
                // 修改日期格式
                let date = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/
                     ,"$3/"+(i+1)+"/$2");
                // 将字符串 转 日期类型
                date = new Date(date);
                this.editBook.pressdate = date;
                this.dialogFormVisible = true;
            },
            remove(book, flag){
                this.$confirm('此操作将'+flag+'该图书, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("../RemoveBookServlet.s",{
                        params : {
                            id : book.id,
                            flag : flag
                        }
                    }).then(res=>{
                        this.$message('已删除!');
                        this.query(1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
        }
    })
</script>
</body>
</html>

<style>
    html, body, #app {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>